<template>
  <div class="switch-with-button">
    <avue-switch v-model="skillControlStatus" @change="handleChange"></avue-switch>
    <el-button type="primary" size="small" icon="el-icon-plus" v-if="skillControlStatus" @click="handleEditSkill">编辑技能</el-button>
    <skill-modal :visible.sync="skillModalVisibile" @close="skillModalVisibile = false" @submit="skillModalVisibile = false"></skill-modal>
  </div>
</template>

<script>
import skillModal from './modal/skillModal.vue';

export default {
  components: {
    skillModal
  },
  props: [],
  data() {
    return {
      skillModalVisibile: false,
      skillControlStatus: 0 // 人员技能管控开关，同时控制新增按钮的显示与否
    };
  },
  methods: {
    handleEditSkill() {
      this.skillModalVisibile = true;
    },
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style>
.switch-with-button {
  .el-button {
    margin-left: 50px;
  }
}
</style>
